<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 20px;
      }
      body{
        min-width: 550px;
      }
      form {
        width: 500px;
        margin: 20px auto;
      }
      select{
        width: 150px;
        margin: 20px auto;
      }
      option{
        width: 150px;
        text-align: center;
      }
      label{
        display: inline-block;
        width: 150px;
        text-align: center;
      }
      textarea{
        width: 500px;
        height: 300px;
        font-size: 12px;
        line-height: 18px;
        resize: none;
      }
      input[type="button"]{
        width: 500px;
        margin: 20px auto;
      }
      #res{
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <form id="form">
      <select name="lang">
        <option value="zh" selected>zh</option>
        <option value="pt">pt</option>
        <option value="fra">fra</option>
        <option value="spa">spa</option>
        <option value="de">de</option>
        <option value="it">it</option>
        <option value="el">el</option>
        <option value="nl">nl</option>
        <option value="fin">fin</option>
        <option value="tr">tr</option>
      </select>
      <label for="transText">
        <input type="radio" id="transText" value="transText" name="type" checked />
        transText
      </label>
      <label for="transObject">
        <input type="radio" id="transObject" value="transObject" name="type" />
        transObject
      </label>
      <textarea name="string"></textarea>
      <input id="submit" type="button" value="submit" />
    </form>
    <textarea id="res"></textarea>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
      $(function () {
        function fetchTranslateApi(string, lang, param) {
          $.ajax({
            url: "/transText",
            method: "post",
            data: {
              lang: lang,
              string: string,
            },
            success: function (res, status, xhr) {
              console.log(res, status, xhr);
              try {
                if (param.type == "transText") {
                  $("#res").html(res.trans_result[0]["dst"]);
                } else {
                  param.object[param.key] = res.trans_result[0]["dst"];
                }
              } catch (e) {
                console.log(e);
                if (param.type == "transText") {
                  $("#res").html("translate failed");
                } else {
                  param.object[param.key] = "____todo____";
                }
              }
            },
            error: function (xhr, status, err) {
              console.log(err, status, err);
            },
          });
        }

        function deepCloneKeys(object) {
          const newObject = {};
          for (let key in object) {
            if (
              typeof object[key] == "string" ||
              typeof object[key] == "number"
            ) {
              newObject[key] = "";
            }
            if (typeof object[key] == "object") {
              const obj = deepCloneKeys(object[key]);
              newObject[key] = obj;
            }
          }
          return newObject;
        }

        function deepRegisterQueue(register, object, lang, res) {
          for (let key in object) {
            if (
              typeof object[key] == "string" ||
              typeof object[key] == "number"
            ) {
              register.queue.push((newObject) => {
                register.callback(object[key], lang, {
                  type: "transObject",
                  object: res,
                  key: key,
                });
              });
            }
            if (typeof object[key] == "object") {
              deepRegisterQueue(register, object[key], lang, res[key]);
            }
          }
        }

        function processRegisterQueue(register, object, lang) {
          register.res = deepCloneKeys(object);
          deepRegisterQueue(register, object, lang, register.res);
          register.timer = setInterval(() => {
            if (register.queue.length) {
              const callback = register.queue.shift();
              callback();
            } else {
              clearInterval(register.timer);
              $("#res").html(JSON.stringify(register.res));
            }
          }, register.time);
        }

        const register = {
          res: null,
          timer: null,
          time: 3000,
          callback: fetchTranslateApi,
          queue: [],
        };

        $("#submit").on("click", function (event) {
          event.preventDefault();
          var arr = $("#form").serializeArray();
          var obj = {};
          for (var i = 0; i < arr.length; i++) {
            obj[arr[i]["name"]] = arr[i]["value"];
          }
          if (obj.type == "transObject") {
            try {
              eval("obj.string = " + obj.string);
            } catch (e) {
              return console.log(e);
            }
            processRegisterQueue(register, obj.string, obj.lang);
          } else {
            fetchTranslateApi(obj.string, obj.lang, {
              type: "transText",
            });
          }
        });
      });
    </script>
  </body>
</html>
